<template>
    <div id="myCard">
        <header class="header"><router-link to='/mine?type=3' class="toreturn"><i class="el-icon-arrow-left"></i></router-link>我的二维码</header>
        <swiper :options="swiperOption" ref="mySwiper">
            <swiper-slide v-for="(item,index) in this.$store.state.allCards" :key="index">
                <div class="flexs">
                    <img :src="baseUrl.baseUrl+item.cwxcode+'?time='+(new Date()).valueOf()">
                    <span>{{item.cname}}</span>
                </div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
        
    </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import {isCreateCard} from '../../../js/dataServe'
import {baseUrl} from '../../../config/env'
export default {
    data(){
        return {
            isplay:false,
            cards:[],
            baseUrl:{baseUrl},
            ind:0,
            swiperOption: {
                loop:true,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                },
                pagination: {
                    el: '.swiper-pagination',
                    type: 'fraction'
                }
            }
        }
    },
    components: {
        swiper,
        swiperSlide
    },
    methods:{
       
    },
    mounted(){
        let self = this;
        if(this.$store.state.allCards.length<=0){
            let responseData = isCreateCard();
            responseData.then((res)=>{
                                        if(res.result == 1){
                                            this.$store.commit('changeAllCards',{val:res.data.reverse()});
                                        }
                                    })
        } 
    },
}
</script>
<style>
	.swiper-button-prev{ background:url(../../../../static/image/leftJt.png)}
	.swiper-button-next{ background:url(../../../../static/image/rightJt.png)}
</style>
<style scoped >
#myCard {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    width: 100%;
    height:100%;
    position: absolute;
    top: 0;
    left: 0;
}
.header{
    width:100%;
    height:3rem;
    line-height:3rem;
    background:#eee;
    color:#333;
    font-size:1.2rem;
    position: fixed;
    top: 0;
    z-index:5;
}
header .toreturn{
    position: absolute;
    left: 1rem;
    color: #333;
    width: 2rem;
}
header .addArt{
    position: absolute;
    right: 1rem;
    color: #333;
    width: 2rem;
}
.el-carousel{
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 300px;
}
.flexs{
    display:flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.flexs img{
    width:15rem;
    height:15rem;
}
.flexs span{
    font-size:1.5rem;
}
ul{
    display:none;
}
.swiper-container{
    height:100%;
    width:100%;
}
</style>
